<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <!-- 因为该插件划分10分 设计稿1920 太大 修改内部10等分为24等分 
         那么一份的html字体大小就是1920/24=80px  可修改cssroot为80-->
    <script src="./js/flexible.js"></script>
</head>

<body>
    <!-- 顶部区域 -->
    <header>
        <h1>Echarts 数据可视化模型</h1>
        <span class="showTime"></span>
    </header>
    <!-- 主体内容区域 -->
    <div class="mainContainer">
        <div class="column">
            <!-- 柱状图 -->
            <div class="panel bar1">
                <h2>柱状图-前端就业</h2>
                <div class="chart"></div>
                <!-- 下角的制作 -->
                <div class="panel-footer"></div>
            </div>
           <!-- 线形图 -->
            <div class="panel line">
                <h2>折线图-前端就业
                    <a href="javascript:;">2020</a>
                    <a href="javascript:;">2021</a>
                </h2>
                <div class="chart"></div>
                <!-- 下角的制作 -->
                <div class="panel-footer"></div>
            </div>
           <!-- 扇形图 -->
            <div class="panel pie">
                <h2>柱状图-前端就业</h2>
                <div class="chart"></div>
                <!-- 下角的制作 -->
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="column">
            <!-- 上数字模块 -->
            <div class="no">
                <div class="no-hd">
                 <ul>
                     <li>125811</li>
                     <li>104563</li>
                 </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>前端需求人数</li>
                        <li>市场供应人数</li>
                    </ul>
                </div>
            </div>
            <!-- 下地图模块 -->
            <div class="map">
                <!-- 静态球 -->
                <div class="map1"></div>
                <!-- 旋转图片 -->
                <div class="map2"></div>
                <!-- 旋转飞机 -->
                <div class="map3"></div>
                <!-- 中国地图 -->
                <div class="chart">
                    123
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 柱状图 -->
            <div class="panel bar2">
                <h2>柱状图-前端就业</h2>
                <div class="chart"></div>
                <!-- 下角的制作 -->
                <div class="panel-footer"></div>
            </div>
           <!-- 线形图 -->
            <div class="panel line2">
                <h2>柱状图-前端就业</h2>
                <div class="chart"></div>
                <!-- 下角的制作 -->
                <div class="panel-footer"></div>
            </div>
           <!-- 扇形图 -->
            <div class="panel pie2">
                <h2>柱状图-前端就业</h2>
                <div class="chart"></div>
                <!-- 下角的制作 -->
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/echarts.min.js"></script>
    <!-- 导入中国地图的中国地图的js -->
    <script src="./js/china.js"></script>
    <script src="./js/myIndex.js"></script>
    <script>


        function weekDay(date) {
            var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            return weekday[date];
        }
        time();
        var timerId = null;
        //  timerId = setTimeout(time,1000);
        function time() {
            clearTimeout(timerId);
            dt = new Date();
            var y = dt.getFullYear(); //年
            var yue = (dt.getMonth() + 1).toString().padStart(2, "0"); //月
            var day = (dt.getDate()).toString().padStart(2, "0"); //日期
            var h = (dt.getHours()).toString().padStart(2, "0"); //时
            var m = dt.getMinutes().toString().padStart(2, "0"); //分
            var s = dt.getSeconds().toString().padStart(2, "0"); //秒
            var date = dt.getDay();
            document.getElementsByClassName("showTime")[0].innerHTML = "<span>" + y + "</span>年 \
            <span>"+ yue + "</span>月\
            <span>"+ day + "</span>日\
            <span>"+ h + "</span>时\
            <span>"+ m + "</span>分\
            <span>"+ s + "</span>秒\
            <span>"+ weekDay(date);
            timerId = setTimeout(time, 1000);
        }




    </script>
</body>

</html>